<template>
  <div class="register">
    <div class="return clearfix">
      <router-link to="/home"> 首页 </router-link>
      > {{$route.name}}
    </div>
    <!-- <h3 class="text-center header-title">用户注册</h3> -->
    <form action="#" class="form-horizontal col-md-6 col-md-offset-3" autocomplete="off">
      <div class="form-group">
        <label for="user" class="col-md-3 label-control">用户名</label>
        <div class="col-md-9">
          <input type="text" @focus="rules.user.pass=true" class="form-control" v-model="userInfo.user" placeholder="请输入用户名（创建后不可更改）">
        </div>
        <div class="col-md-9 col-md-offset-3 errorTest" v-show="!rules.user.pass">
          用户名由2-16位(汉字,数字,字母,下划线)组成
        </div>
      </div>
      <div class="form-group">
        <label for="password" class="col-md-3 label-control">密码</label>
        <div class="col-md-9">
          <input type="password" @focus="rules.password.pass=true" v-model="userInfo.password" class="form-control" placeholder="请输入密码">
        </div>
        <div class="col-md-9 col-md-offset-3 errorTest" v-show="!rules.password.pass">
          密码由6-16位(字母,数字,下划线)组成,首字符必须为非数字
        </div>
      </div>
      <div class="form-group">
        <label for="password" class="col-md-3 label-control">确认密码</label>
        <div class="col-md-9">
          <input type="password" @focus="rules.confirmPassword.pass=true" v-model="userInfo.confirmPassword" class="form-control" placeholder="请再次输入密码">
        </div>
        <div class="col-md-9 col-md-offset-3 errorTest" v-show="!rules.confirmPassword.pass">
          两次输入密码不一致
        </div>
      </div>
      <!-- <div class="form-group">
        <label for="password" class="col-md-3 label-control">性别</label>
        <div class="col-md-9">
          <label for="" class="checkbox-inline">
            <input type="radio" name="sex" value="male" v-model="userInfo.sex">男
          </label>
          <label for="" class="checkbox-inline">
            <input type="radio" name="sex" value="female" v-model="userInfo.sex">女
          </label>
        </div>
      </div>
      <div class="form-group">
        <label for="" class="col-md-3 label-control">邮箱地址</label>
        <div class="col-md-9 ">
            <input type="email" @focus="rules.email.pass=true" class="form-control" v-model="userInfo.email" placeholder="请输入邮箱">
        </div>
        <div class="col-md-9 col-md-offset-3 errorTest" v-show="!rules.email.pass">
          邮箱格式不正确
        </div>
      </div>
      <div class="form-group">
        <label for="" class="col-md-3 label-control">验证码</label>
        <div class="col-md-5">
          <input type="text" class="form-control" @focus="rules.authCode.pass=true" v-model="userInfo.authCode" placeholder="4位验证码">
        </div>
        <div class="col-md-3 col-md-offset-1 ">
          <a href="#" @click.prevent="getAuthCode" class="btn getAuthCode" title="系统将发送一封邮件到你的邮箱" v-show="!countDown.start">获取验证码</a>
          <span class="btn disabled" v-show="countDown.start">{{countDown.time}}s 后重发</span>
        </div>
        <div class="col-md-9 col-md-offset-3 errorTest" v-show="!rules.authCode.pass">
          验证码错误
        </div>
      </div>
       -->
      <div class="form-group">
        <div class="col-md-3 col-md-offset-3">
          <button class="btn btn-primary" @click.prevent="registerBtn">提交</button>
        </div>
      </div>
    </form>
  </div>
</template>

<style>

  .countDown {
    cursor: normal;
    color: #999;
  }
  .getAuthCode {
    font-size: 12px!important;
  }
</style>

<script>
  export default {
    data () {
      return {
        countDown: {
          start: false,
          time: 60
        },
        userInfo: {
          user: '',
          password: '',
          confirmPassword: '',
          sex: 'male',
          email: '',
          authCode: ''
        },
        rules: {
          user: {
            patt: /^([\w\u4E00-\u9FA5]){2,16}$/,
            pass: true
          },
          password: {
            patt: /^([\w]){6,16}$/,
            pass: true
          },
          confirmPassword: {
            pass: true
          },
          /*email: {
            patt: /^\w+@\w+(\.[\w]+){1,2}$/,
            pass: true
          },
          authCode: {
            pass: true
          }*/
        }
      }
    },
    methods: {
      /*getAuthCode () {
        if (!this.userInfoTest()) {
          return
        }
        if (this.countDown.start) {
          return
        }
        this.countDown.start = true
        //  倒计时
        var timer = setInterval(function () {
          if (!this.countDown.time--) {
            clearInterval(timer)
            this.countDown.start = false
            this.countDown.time = 60
          }
        }.bind(this), 1000)
        //  获取验证码
        this.$http.get(this.rootPath + '/authCode?email=' + this.userInfo.email).then((res) => {
        //  获取成功，在后台保存
          window.alert('验证码已发送到邮箱')
        })
      },*/
      registerBtn () {
        //  验证
        if (!this.userInfoTest()) {
          return
        }
        this.$http.post(this.rootPath + '/register', this.userInfo).then((res) => {
          switch (res.data) {
            case '1':
              window.alert('注册成功,点击跳转到登陆页面...')
              this.$router.push('/login')
              break
            case '0':
              window.alert('该用户名已经注册过了！')
              break
            case '-1':
              this.rules.authCode.pass = false
              break
           /* case '3':
              window.alert('该邮箱已经注册过了！')
              break*/
          }
        })
      },
      userInfoTest () {
        var rules = this.rules
        var userInfo = this.userInfo
        var valid = true
        if (!rules.user.patt.test(userInfo.user)) {
          rules.user.pass = valid = false
        }
        if (!rules.password.patt.test(userInfo.password)) {
          rules.password.pass = valid = false
        }
        if (userInfo.password !== userInfo.confirmPassword) {
          rules.confirmPassword = valid = false
        }
        /*if (!rules.email.patt.test(userInfo.email)) {
          rules.email.pass = valid = false
        }*/
        return valid
      }
    },
    props: ['rootPath']
  }
</script>